<template>
  <div class="orders_content">
    <van-pull-refresh v-model="loading" @refresh="loadData">
      <div style="padding: 10px; background-color: RGB(248, 248, 248)">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="listOnload"
        >
          <div
            v-for="item in order_list"
            class="order_card"
            @click="handleClick(item)"
            :key="item.id"
          >
            <div style="color: blue">买家：{{ item.user_name }}</div>
            <div style="display: flex; justify-content: space-between">
              <div>商品数量:{{ item.item_number }}</div>

              <div :class="'status' + item.delivery_status">
                {{ item.delivery_status === 1 ? "未送货" : "已送货" }}
              </div>

              <div style="color: red">
                总金额:{{ item.total_amount || "-" }}
              </div>
            </div>
            <div>
              <div
                style="display: inline-block; width: 70px; margin-right: 10px"
              >
                <img
                  :src="BASE_URL + 'static/avatars/' + item.avatar_url"
                  alt=""
                  width="100%"
                />
              </div>
              <div style="display: inline-block">
                <div>下单时间: {{ getDate(item.create_at) }}</div>

                <div>预约时间: {{ getDate(item.reservation_time) }}</div>
                <div>
                  送达时间:
                  <span v-if="item.end_time">{{ getDate(item.end_time) }}</span>
                  <span v-else>----/--/--/ --:--</span>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref } from "vue";
import dayjs from "dayjs";
import http from "@/api/http.js";
import { BASE_URL } from "@/library/constans";
const order_list = ref([]);
function getDate(item) {
  return dayjs(item).format("YYYY-MM-DD HH:mm");
}

const loading = ref(false);

function handleClick() {}

const list_loading = ref(false);
const finished = ref(false);
const limit = ref(10);
const total = ref(0);
async function loadData() {
  let res = await http.get("order/admin_get_list", {
    params: { page: 1, limit: limit.value, start_date: "", end_date: "" },
  });
  loading.value = false;
  if (res.data.code === "0") {
    console.log(res.data);
    order_list.value = res.data.data;
    total.value = res.data.total;
  }
}
function listOnload() {
  list_loading.value = true;
  limit.value += 10;
  loadData();
  if (order_list.value.length >= total.value) {
    finished.value = true;
  }
}
</script>

<style scoped>
.orders_content {
  height: 100%;
  overflow: auto;
}

.order_card {
  background-color: #fff;
  order: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 15px;
  width: 100%;

  box-shadow: 0px 0px 5px 2px #e2e2e2;
  /* display: flex; */
  /* flex-wrap: wrap; */
  /* justify-content: space-between; */
  font-size: 18px;
}

.button {
  display: inline-block;
  width: 30vw;
}

.status1 {
  color: blueviolet;
}

.status2 {
  color: blue;
}
</style>